React-[入門篇]-加入更多元件到React Pizza專案


我們繼續回到以CRA所建立的React Pizza專案上
上篇我們透過CRA建立專案,都集中在index.js中撰寫程式碼,加入食譜資料並創建Pizza元件

繼續加入更多元件在index.js中

我們繼續創建Header Menu Footer元件

Header 元件


顯示出來了!

Footer 元件(不寫JSX的方式)

用React.createElement()函式來return建立外觀

真的也可以噎!但真的不好閱讀

Footer 元件(寫JSX的方式)



現在就可以體會到JSX語法的好用,完美結合了html 和 js語法並存

Menu 元件


元件中可以寫入自己的邏輯流程

記得這張圖:

元件中可以寫入自己的邏輯流程

#React入門 #JSX(JS&HTML)







你可能感興趣的文章

堆積排序(Heap Sort)

堆積排序(Heap Sort)

OOP - 1 寫在前面

OOP - 1 寫在前面

為什麼需要 React / 思考模式的差異 / state vs props

為什麼需要 React / 思考模式的差異 / state vs props






留言討論